<template>
  <div id="echarts1"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Echarts1",
  data() {
    return {
      echarts:'',
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('echarts1')
      this.echarts = echarts.init(chartDom)

    },
    setEChartsOptions(data){
      const newData = [data.work_day,data.residue_day,data.beyond_day]
      const option = {
        title: {
          text: `项目工期统计（预计工期：${data.plan_work_day}天）:`,
          // subtext: ' Data',
          top: 'left'
        },
        xAxis: {
          type: 'category',
          data: ['已施工天数', '剩余天数', '超出天数']
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'item',
          // formatter: function(params){
          //   console.log(params)
          // }
        },
        series: [
          {
            name:'已施工天数',
            data: newData,
            type: 'bar',
            itemStyle:{
              normal:{
                color:function (params) {
                  const colorList = ['#91cc75','#fac858','#ee6666']
                  return colorList[params.dataIndex]
                }
              },
            }
          },
        ]
      };
      this.echarts && this.echarts.setOption(option);
    },
  }
}
</script>

<style scoped lang="scss">
#echarts1{
  width: 100%;
  height: 100%;
}
</style>
